<template>
	<view class="page-content">
		<view class="m-search">
			<u-search 
				:placeholder='param.title'
				:show-action="true" 
				:actionText="$t('search.title')" 
				:animation="true" 
				shape="square"
				@custom="searchHistory"
				@search="searchHistory"
			>
			</u-search>
		</view>
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0" :emptyText="$t('search.empty')"></m-loading>
		<view class="title-part m-md text-center" v-if="list.data.length > 0">
			<text class="text-secondary text-sm number">{{ $util.handleStr($t('search.result-title'),list.total) }}</text>
		</view>
		<m-tasks :list="list.data" v-if="!listLoad"></m-tasks>
		<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				param: {
					page: 1,
					state: 3,
					limit_surplus_num:1,
					title:''
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				
				// keyword:'',
				// taskList:[],
				status:"loading",
				showLoading:false,
				placeholder:this.$t('search.input-placeholder'),
				listLoad:true,
				scrollTop: 0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			// param: state => state.task.searchParam,
			contentText: state => state.content.contentText,
		}),
		onLoad(option){
			let {
				key
			} = option
			this.param.title = key
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			if(this.keyword){
				this.placeholder = this.keyword;
			}
			this.getList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);		
		},
		
		methods: {
			// ...mapActions(['getTaskList']),
			// ...mapMutations(['updateTaskState']),
			
			async getList(page = 0){
				let param = uni.$u.deepClone(this.param)
				if (page) param.page = page
				let res = await this.$api.task.getTaskList(param)
				if(res.code == 200){
					let newList = res.data
					if(page > 1){
						newList.data = this.list.data.concat(newList.data) // 合并数组
					}
					this.list = newList
					this.listLoad = false;
				}
				// await this.getTaskList(param)
				// this.listLoad = false;
				// param.title = this.keyword
				// this.updateTaskState({
				// 	key: 'searchParam',
				// 	val: param
				// })
				// await this.getTaskList(param)
				// this.listLoad = false;
			},
			
			// 搜索框内容变化
			searchHistory:async function(value){
				this.param.title = value
				this.listLoad = true
				await this.getList(1);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color:$bgcolor-2;
	}
	.m-search{
		position: relative;
		z-index: 99;
		padding: 10px 30rpx;
		background-color: #fff;
		margin-bottom: 10px;
		// background-color:$maincolor-1;
	}
	.conter{
		border-radius: 10px;
		overflow: hidden;
	}
</style>
